<template>
	<view>
		<u-tabs :list="list" :is-scroll="false" :current="type" active-color="rgb(248,95,0)"  @change="change()"></u-tabs>
		<view class="activity">
			<view class="activityItem" v-for="(item ,index) in collectList" :key="index" @click="navRoute(item)">
				<view class="activityImg">
					<image :src="item.pic" mode="aspectFill">
					</image>
				</view>
				<view class="activityText">
					<view class="name">
						{{item.title}}
					</view>
					<view class="label">
						<view class="">
							{{item.school_title}}
						</view>
						<view class="">
							{{item.applicable}}
						</view>
						<view class="">
							{{item.pattern}}
						</view>
					</view>
					<view class="money">
						￥{{item.price}}
					</view>
				</view>
				<view class="esc" @click.stop="esc(item.coll_id)">
					删除
				</view>
			</view>

		<u-empty v-if="!collectList.length" text="暂无相关课程" mode="list" margin-top="100"></u-empty>

		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '课程'
				}, {
					name: '拼团'
				}, {
					name: '砍价'
				}],
				collectList: [],
				type: 0
			}
		},
		onLoad() {
			this.newData()
		},
		methods: {
			newData() {
				this.$myRuquest('home/user/collect_list', {
					type: this.type + 1
				}).then(res => {
					if (res.code == 400) {
						this.collectList = res.data
					}
				})
			},
			change(index) {
				this.type = index;
				this.newData()
			},
			esc(coll_id) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '您确定要取消收藏吗？',
					success: function(res) {
						if (res.confirm) {
							that.$myRuquest('home/user/collect_list_del', {
								coll_id
							}).then(res => {
								if (res.code == 400) {
									that.newData()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			navRoute(item) {
				console.log(item)
				uni.navigateTo({
					url: `/pages/organizationDetails/clusterHelp/clusterHelp?id=${item.cour_id}`
				});
			}
		}
	}
</script>

<style lang="less">
	.activity {
		background-color: rgb(247,247,247);
		padding: 20upx;
		min-height: calc(100vh - 160upx);

		.activityItem {
			padding: 20upx;
			display: flex;
			position: relative;
			margin-bottom: 20upx;
			background-color: #fff;
			border-radius: 12upx;
			position: relative;

			.activityImg {
				width: 120upx;
				height: 120upx;
				border-radius: 12upx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.activityText {
				margin: 0 20upx;
				width: calc(100% - 160upx);

				.name {
					font-weight: 900;
				}

				.label {
					display: flex;
					font-size: 20upx;
					margin: 14upx 0;
					color: #767676;

					view {
						padding: 0 20upx;
					}

					view:nth-child(1) {
						padding-left: 0;
					}

					view:nth-child(1),
					view:nth-child(2) {
						border-right: 1upx solid #a8a8a8;

					}


				}

				.money {
					color: rgb(248, 95, 0);
					font-weight: 900;
				}
			}

			.esc {
				width: 100upx;
				height: 50upx;
				line-height: 50upx;
				border-radius: 12upx;
				text-align: center;
				background-color: red;
				color: #fff;
				position: absolute;
				font-size: 24upx;
				right: 20upx;
				bottom: 20upx;
			}
		}


	}
</style>
